<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">外出、培训、学习审批</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <div style="padding:10px 15px;background:#fff">
      <div>
        <chousebumen :getspl.sync="gooutData.branchid" />
        <div v-for="(item, index) in timearr" :key="index">
          <picker2 :pictitle="'请选择开始时间'" :gettime.sync="item.starttime" />
          <mt-radio v-model="item.startinterval" :options="options" title="时段" />
          <picker2 :pictitle="'请选择结束时间'" :gettime.sync="item.endtime" />
          <mt-radio v-model="item.endinterval" :options="options" title="时段" />
          <p style="line-height:40px;height:40px;margin-left:8px;">时长（天）：{{ gettimelen(item.starttime,item.startinterval,item.endtime,item.endinterval) }}</p>
          <mt-button plain size="small" type="primary" style="display:block;width:94%;margin:0 auto" @click="deletelen(index)">删 除</mt-button>
        </div>
        <mt-button size="small" type="primary" style="display:block;width:94%;margin:20px auto" @click="addtimelen">添加时长</mt-button>
        <mt-field v-model="gooutData.address" label="*外出地点:" placeholder="输入外出地点" />
        <mt-field v-model="gooutData.detail" label="*外出事由:" placeholder="输入外出事由" />
        <mt-field v-model="gooutData.userdetail" label="*参加人员:" placeholder="输入参加人员" />
        <chouseperson :atypeid="'0105'" :number="num" @getspl="getspl" />
      </div>

      <div class="btn_f">
        <mt-button type="default" style="width:100px;margin-right:15px" @click="goback">取消</mt-button>
        <mt-button type="primary" style="width:100px" @click="submitgoout">确定</mt-button>
      </div>
    </div>
    <mt-popup v-model="popupVisible22" position="bottom" class="mint-popup" style="width:100%">
      <mt-picker :slots="dataList" :visible-item-count="5" :show-toolbar="true" value-key="cName" @change="onDateChange">
        <mt-button class="sure" style="display:block;position: absolute;right: 0px;" @click="handleConfirm2">确认</mt-button>
      </mt-picker>
    </mt-popup>
    <div class="datePicker">
      <mt-datetime-picker ref="picker" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" />
    </div>
  </div>
</template>
<script>
import picker2 from '~/components/picker2.vue'
import uploadpic from '~/components/uploadpic.vue'
import chouseperson from '~/components/chouseperson.vue'
import chousebumen from '~/components/chousebumen.vue'
export default {
  components: {
    uploadpic,
    chouseperson,
    chousebumen,
    picker2
  },
  data () {
    return {
      ts: this.newStore(),
      handler: function (e) {
        e.preventDefault()
      },
      chouseval: '',
      popupVisible22: false,
      chousname: [],
      grantime: '请选择时间',
      gooutData: {
        starttime: [],
        endtime: [],
        startinterval: [],
        endinterval: [],
        leavenum: '',
        leavedetailnum: []
      },
      timearr: [
        {
          starttime: '',
          startinterval: '',
          endtime: '',
          endinterval: '',
          timelen: ''
        }
      ],
      filename: {
        name: '点我上传'
      },
      usedetail: '',
      carid: '',
      shenpi: '',
      aid: '',

      options: [
        {
          value: '1',
          label: '上午'
        },
        {
          value: '2',
          label: '下午'
        }
      ],
      num: 0,
      dataList: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }
      ],
      htitle: '外出、培训、学习审批'
    }
  },
  watch: {
    timearr: {
      handler (newValue) {
        this.num = 0
        for (let i = 0; i < newValue.length; i += 1) {
          newValue[i].timelen = this.gettimelen(
            newValue[i].starttime,
            newValue[i].startinterval,
            newValue[i].endtime,
            newValue[i].endinterval
          )
          this.num += Number(newValue[i].timelen)
        }
      },
      deep: true
    }
  },
  methods: {
    goback () {
      this.$router.push({ name: 'approval2', query: { name: '申请' } })
    },
    //提交
    submitgoout () {
      if (
        this.gooutData.branchid == '' ||
        this.gooutData.branchid == undefined
      ) {
        this.$messagebox('提示', '请选择申请部门')
        return
      }
      for (let i = 0; i < this.timearr.length; i += 1) {
        if (
          this.timearr[i].starttime == '' ||
          this.timearr[i].starttime == undefined
        ) {
          this.$messagebox('提示', '请选择开始时间')
          return
        }
        if (
          this.timearr[i].startinterval == '' ||
          this.timearr[i].startinterval == undefined
        ) {
          this.$messagebox('提示', '请选择开始时间段')
          return
        }
        if (
          this.timearr[i].endtime == '' ||
          this.timearr[i].endtime == undefined
        ) {
          this.$messagebox('提示', '请选择结束时间')
          return
        }
        if (
          this.timearr[i].endinterval == '' ||
          this.timearr[i].endinterval == undefined
        ) {
          this.$messagebox('提示', '请选择结束时间端')
          return
        }
      }
      if (this.gooutData.address == '' || this.gooutData.address == undefined) {
        this.$messagebox('提示', '请输入外出地点')
        return
      }
      if (this.gooutData.detail == '' || this.gooutData.detail == undefined) {
        this.$messagebox('提示', '请输入外出事由')
        return
      }
      if (
        this.gooutData.userdetail == '' ||
        this.gooutData.userdetail == undefined
      ) {
        this.$messagebox('提示', '请输入参加人员')
        return
      }
      if (this.aid == '' || this.aid == undefined) {
        this.$messagebox('提示', '请选择审批流')
        return
      }
      this.gooutData.leavenum = ''
      for (let i = 0; i < this.timearr.length; i += 1) {
        this.gooutData.starttime.push(this.timearr[i].starttime)
        this.gooutData.endtime.push(this.timearr[i].endtime)
        this.gooutData.startinterval.push(this.timearr[i].startinterval)
        this.gooutData.endinterval.push(this.timearr[i].endinterval)
        this.gooutData.leavenum =
          Number(this.gooutData.leavenum) + Number(this.timearr[i].timelen)
        this.gooutData.leavedetailnum.push(this.timearr[i].timelen)
      }
      //这个
      // this.checksplnum(this.gooutData.leavenum, this.aid).then(() => {
      //   if (this.flag == false) {
      //     this.$messagebox('提示', '审批流不符合条件，请重新选择')
      //     return
      //   }
      this.$messagebox.confirm('确认提交外出、培训审批').then(action => {
        if (action == 'confirm') {
          const req = {
            handle:
              '9000B8B8D347526960C5BAB1FB6894EF8B7B312373E9BEF47A8517CE4098C19A',
            atype: '0105',
            flowid: this.aid
          }
          this.spost(this.ts, '/mainservlet', req).then(ts => {
            const req2 = this.gooutData
            req2.aid = ts.d.data.operation3[0].hash.approvalid
            req2.handle =
              '06BBA4638D6221E7C94D5152B4CB8D877A1F05FDC4A221F34B73C71EED1C1BDA88D6D925C779BA4C'
            // for (let m = 0; m < this.filearr1.length; m++) {
            //   req2.fileurl = this.filearr1[m].index.url
            //   req2.filename = this.filearr1[m].index.name
            // }
            // req2.fileurl = this.filename.url.split(',')
            // req2.filename = this.filename.name.split(',')

            console.log(req2)
            this.spost(this.ts, '/mainservlet', req2).then(() => {
              this.$messagebox('提示', '外出，培训，学习审批成功')
              this.$router.push({ name: 'jbrhome', query: { name: '' } })
            })
          })
        }
      })
    },
    gettimelen (a, a1, b, b1) {
      if (a == '' || a1 == '' || b == '' || b1 == '') {
        return ''
      }
      const datedif = this.datedifference(a, b)
      const timedif = (b1 - a1) / 2 + 0.5
      return datedif + timedif
    },
    option () {
      this.$router.push({
        name: 'approval2',
        query: {
          name: ''
        }
      })
    },
    datedifference (sDate1, sDate2) {
      // sDate1和sDate2是2006-12-18格式
      let dateSpan
      let iDays
      sDate1 = Date.parse(sDate1)
      sDate2 = Date.parse(sDate2)
      dateSpan = sDate2 - sDate1
      dateSpan = Math.abs(dateSpan)
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
      return iDays
    },
    checksplnum (money2, splid) {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF3277431D02D636A5015C1425899A1F59A41CF7A197311E4A',
        flowid: splid,
        number: money2
      }
      const p = this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          this.flag = false
        } else {
          this.flag = true
        }
      })
      return p
    },
    addtimelen () {
      var obj = {
        starttime: '',
        startinterval: '',
        endtime: '',
        endinterval: ''
      }
      this.timearr.push(obj)
    },
    deletelen (index) {
      this.timearr.splice(index, 1)
    },
    getspl (val) {
      console.log(val, 'val')
      this.aid = val.id
    },
    getbumen (val) {
      this.aid2 = val.orgid
    },
    addqjtime () {
      this.$router.push({
        name: 'jbrtime'
      })
    },
    addqjtime2 () {
      this.$router.push({
        name: 'jbrbxson'
      })
    },
    //获取牌照且添加牌照

    //mint时间选择器开始
    addtime () {
      this.$refs.picker.open()
    },
    deletime (index) {
      console.log(index)
      this.timedata.splice(index, 1)
      console.log(this.timedata)
    },
    //时间赋值
    handleConfirm (data) {
      console.log(data)
      this.grantime = this.formatDate(data)
    },
    //时间选择优化函数
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    handleConfirm2 () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      //this.chouseval = this.$refs.picker.getValues()[0]
      this.popupVisible22 = false
    },
    //赋值
    onDateChange (picker, values) {
      //console.log(picker)
      //console.log(values)
      this.chouseval = values
      for (let k = 0; k < this.chousname.length; k++) {
        if (this.chouseval == this.chousname[k].carno) {
          this.chouseid = this.chousname[k].carid
        }
      }
    }
  }
}
</script>
<style scoped>
.mint-field-core {
  text-align: right;
}
.timeright {
  display: inline-block;
  float: right;
}
.mint-radiolist {
  line-height: 30px;
  font-size: 16px !important;
}
.mint-radiolist .mint-radiolist-title {
  font-size: 16px !important;
  color: #000 !important;
}
.mint-cell .mint-field {
  line-height: 48px;
}
.mint-radiolist {
  display: flex;
  flex: 1;
}
.timeitem {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.qjtime {
  padding: 0 10px;
  line-height: 25px;
}
.qjcolor {
  color: blue;
  display: inline-block;
  float: right;
}
.sbdata {
  margin: 10px;
  line-height: 25px;
}
.delright {
  float: right;
  color: red;
  padding-left: 5px;
}
.picker-center-highlight {
  position: absolute;
  top: 50% !important;
}
.picker-item {
  position: relative;
  top: 35px !important;
}
/* .mint-radiolist{
  font-size: 16px!important;
  line-height: 30px!important;
  color:#000!important;
}
.mint-radiolist .mint-radiolist-title{
  font-size: 16px!important;
  color:#000!important;
} */
</style>
